<template>
	<view class="releaseBuildDetails">
		<view class="releaseBuildDetails-header ff-bg-fff">
			<view
				class="releaseBuildDetails-header-box ff-flex-between ff-align-items-one ff-border-radius-10 ff-padding-15">
				<view>
					<view
						class="releaseBuildDetails-header-box-title ff-font-16 ff-font-weight-600 ff-color-000 ff-margin-bottom-10">
						{{ buildParams.buildingName }}
					</view>
					<view class="releaseBuildDetails-header-box-address ff-font-13 ff-line-height-1-3">
						<u-icon name="map" color="#5C5F65" size="28"></u-icon>
						{{ buildParams.buildingAddr }}
					</view>
				</view>
				<u-checkbox-group @change="allChoose"><u-checkbox v-model="allCheck" size="45" icon-size="32"
						name="all"></u-checkbox></u-checkbox-group>
			</view>
		</view>
		<view class="releaseBuildDetails-content ff-padding-bottom-60">
			<u-checkbox-group>
				<view class="ff-padding-15 ff-border-radius-10 ff-margin-bottom-10 ff-bg-fff"
					v-for="item of buildDetailsList" :key="item.id">
					<view class="ff-flex-between ff-align-items-one ff-margin-bottom-20">
						<view class="ff-font-16 ff-font-weight-600">{{ item.facilitiesTypeName }}</view>
						<u-checkbox-group @change="checkboxChange(item)"><u-checkbox v-model="item.checked" size="45"
								icon-size="32" name="all"></u-checkbox></u-checkbox-group>
					</view>
					<u-table border-color="transparent" padding="30rpx 20rpx" align="left">
						<u-tr>
							<u-th style="width: 80%;">设施设备</u-th>
							<u-th style="width: 20%;">总数</u-th>
						</u-tr>
						<u-tr v-for="itemTable of item.items" :key="itemTable.facilitiesItemId">
							<u-td style="width: 80%;">{{ itemTable.facilitiesItemName }}</u-td>
							<u-td style="width: 20%;">{{ itemTable.number }}</u-td>
						</u-tr>
					</u-table>
				</view>
			</u-checkbox-group>
		</view>
		<view class="releaseBuildDetails-but"><u-button type="primary" @click="defineSubmitk">确定</u-button></view>
		<u-back-top :scrollTop="scrollTop" top="200" mode="circle" :iconStyle="iconStyle"
			:customStyle="customstyle"></u-back-top>
		<!-- -----------------------------弹框区------------------------------ -->
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<u-modal v-model="infoModal" confirm-text="我知道了" title="温馨提示" :content="contentModal"
			:content-style="{ 'line-height': '1.5' }" />
		<u-modal v-model="splitModal" @confirm="splitConfirm" :show-cancel-button="true" title="请按实际情况选择"
			:content-style="{ 'line-height': '1.5' }">
			<view class="slot-content ff-line-height-1-4 ff-padding-15 ff-font-14">
				<view class="ff-margin-bottom-5">
					未勾选本建筑物下全部消防设施，请按实际情况选择处理办法：
				</view>
				<view>
					·如果设施信息/数量有误：
				</view>
				<view class="ff-margin-bottom-5">
					点击左上角“返回”按钮回到上一页，点底部【维护建筑物】蓝色按钮，选择本建筑物，删除不存在的设施，重新发布需求。
				</view>
				<view>
					·如果设施由不同机构维保：
				</view>
				<view>继续发布需求，提交后等消防部门审核，审核通过后服务机构才能响应。审核期间信息不能改，请仔细核对。
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		name: 'releaseRequirementsBuildDetails',
		data() {
			return {
				// 弹出框系列----start
				infoModal: false, // 弹出框系列----显/隐
				contentModal: '', // 弹出框系列----内容
				allChecked: false, //是否全选
				splitModal: false, // 拆单的弹框显/隐
				splitContentModal: '', // 拆单的弹框内容
				// 返回顶部组件参数设置
				scrollTop: 0,
				iconStyle: {
					fontSize: '32rpx',
					color: '#FFFFFF'
				},
				customstyle: {
					background: '#3B83FE'
				},
				buildDetailsList: [], // 建筑物列表数据
				buildParams: [], // 上个页面传过来的数据
				allCheck: true, // 全选按钮状态
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(e) {
			// JSON.parse(decodeURIComponent(encodeURIComponent(e.params)))
			// console.log('前页面传过来的数据------', e)
			let params = {
				buildingId: e.buildingId,
				buildingName: e.buildingName,
				buildingAddr: e.buildingAddr
			}
			this.buildParams = params // JSON.parse(decodeURIComponent(encodeURIComponent(e.params))) 
			this.getBuildDetails(this.buildParams.buildingId); // 获取建筑物详情数据 
		},
		methods: {
			...mapMutations(['setBuildingIdStatus']),
			// 获取建筑物消防设施详情
			async getBuildDetails(buildingId) {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: `/company/building/${buildingId}/facilities/all`
				});
				// console.log('获取建筑物详情数据-------', data);
				if (data.code == 200) {
					this.buildDetailsList = data.data;
					this.buildDetailsList.forEach(res => {
						// 添加checked属性并设置为true（默认为true)
						this.$set(res, 'checked', true);
					});
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 点击确定按钮
			defineSubmitk() {
				// 判断是否有拆单的
				let checkedList = []
				this.buildDetailsList.forEach(res => {
					checkedList.push(res.checked)
				})
				if (!checkedList.includes(true)) {
					this.infoModal = true
					this.contentModal = '请至少选择一种消防设施！'
					return
				}
				if (checkedList.includes(false)) {
					this.splitModal = true
					this.splitContentModal = '同一建筑物的消防设施，如果拆单给不同的服务机构，需要向消防队提交申请，请知晓。'
					return
				}
				let facilitiesTypeId = []
				this.buildDetailsList.forEach(res => {
					facilitiesTypeId.push(res.facilitiesTypeId)
				})
				let buildList = {
					buildParams: this.buildParams,
					buildDetailsList: facilitiesTypeId,
					isDisassembly: 1
				}
				this.setBuildingIdStatus(this.buildParams.buildingId) // 单位建筑物的id保存到本地
				this.$pageJump.reLaunch(
					'/pages/maintenance/company/home/components/releaseRequirements/releaseRequirements?buildList=' +
					JSON.stringify(buildList))
			},
			// 用户点击了拆单确定按钮
			splitConfirm() {
				let dat = []
				let facilitiesTypeId = []
				this.buildDetailsList.filter(res => {
					if (res.checked == true) {
						dat.push(res)
					}

				})
				dat.forEach(res => {
					facilitiesTypeId.push(res.facilitiesTypeId)
				})
				let buildList = {
					buildParams: this.buildParams,
					buildDetailsList: facilitiesTypeId,
					isDisassembly: 2
				}
				this.setBuildingIdStatus(this.buildParams.buildingId) // 单位建筑物的id保存到本地
				this.$pageJump.reLaunch(
					'/pages/maintenance/company/home/components/releaseRequirements/releaseRequirements?buildList=' +
					JSON.stringify(buildList))
			},
			// ----------------复选框的操作-------------------------
			// 点击某一个复选框
			checkboxChange(e) {
				// console.log('点击复选框--------', e);
				let checkedList = []
				this.buildDetailsList.forEach(res => {
					checkedList.push(res.checked)
				})
				if (!checkedList.includes(false)) {
					this.allCheck = true
					return
				}
				if (!checkedList.includes(true)) {
					this.allCheck = false
					return
				}
			},
			// 点击全选按钮
			allChoose() {
				// console.log('this.issueCheckbox', this.issueCheckbox)
				let checkedList = []
				this.buildDetailsList.forEach(res => {
					checkedList.push(res.checked)
				})
				if (checkedList.includes(false)) {
					this.buildDetailsList.forEach(res => {
						this.$set(res, 'checked', true);
					});
					this.allCheck = true
				} else {
					this.buildDetailsList.forEach(res => {
						this.$set(res, 'checked', false);
					});
					this.allCheck = false
				}

			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.releaseBuildDetails {
		/deep/.u-checkbox {
			display: block;
		}

		&-header {
			padding: 20rpx 24rpx;

			&-box {
				background-color: #f7fbff;

				&-address {
					width: 560rpx;
				}
			}
		}

		&-content {
			margin: 20rpx 24rpx;
		}

		u-table u-tr:nth-child(odd) :first-child {
			background-color: #f8f8f8;
		}

		u-table u-tr {
			line-height: 1.3;
		}

		u-table u-td,
		u-th {
			flex: initial;
		}

		&-but {
			padding-bottom: env(safe-area-inset-bottom); // 针对刘海屏的适配
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #ffffff;

			/deep/.u-size-default {
				height: 100rpx !important;
				line-height: 100rpx !important;
			}
		}
	}
</style>